<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
	<title>openWYSIWYG | Create or Modify Link</title>
</head>
<script type="text/javascript" src="../scripts/wysiwyg-popup.js"></script>

<script type="text/javascript">

/* ---------------------------------------------------------------------- *\
  Function    : insertHyperLink() (changed)
  Description : Insert the link into the iframe html area
\* ---------------------------------------------------------------------- */
function insertHyperLink() {
	var n = WYSIWYG_Popup.getParam('wysiwyg');
	
	// get values from form fields
	var href = document.getElementById('linkUrl').value;
	var target = document.getElementById('linkTarget').value;
	var style = document.getElementById('linkStyle').value;
	var styleClass = document.getElementById('linkClass').value;
	var name = document.getElementById('linkName').value;
  
  	// insert link
	WYSIWYG.insertLink(href, target, style, styleClass, name, n);
	window.close();
}

/* ---------------------------------------------------------------------- *\
  Function    : loadLink() (new)
  Description : Load the link attributes to the form
\* ---------------------------------------------------------------------- */
function loadLink() {
	// get params
	var n = WYSIWYG_Popup.getParam('wysiwyg');
	
	// get selection and range
	var sel = WYSIWYG.getSelection(n);
	var range = WYSIWYG.getRange(sel);
	var lin = null;
	if(WYSIWYG_Core.isMSIE) {
		if(sel.type == "Control" && range.length == 1) {	
			range = WYSIWYG.getTextRange(range(0));
			range.select();
		}
		if (sel.type == 'Text' || sel.type == 'None') {
			sel = WYSIWYG.getSelection(n);
			range = WYSIWYG.getRange(sel);
			// find a as parent element
			lin = WYSIWYG.findParent("a", range);
		}
	}
	else {
		// find a as parent element
		lin = WYSIWYG.findParent("a", range);
	}
	
	// if no link as parent found exit here
	if(lin == null) return;
		
	// set form elements with attribute values
	for(var i=0; i<lin.attributes.length; i++) {
		var attr = lin.attributes[i].name.toLowerCase();
		var value = lin.attributes[i].value;
		if(attr && value && value != "null") {
			switch (attr) {
				case "href":
					// strip off urls on IE
					if(WYSIWYG_Core.isMSIE) value = WYSIWYG.stripURLPath(n, value, false);
					document.getElementById('linkUrl').value = value;
				break;
				case "target":
					document.getElementById('linkTarget').value = value;
					selectItemByValue(document.getElementById('linkTargetChooser'), value);
				break;
				case "name":
					document.getElementById('linkName').value = value;
				break;
				case "class":
					document.getElementById('linkClass').value = value;
				break;
				case "className":
					document.getElementById('linkClass').value = value;
				break;
				
			}
		}
	}
	
	// Getting style attribute of the link separately, because IE interprets the 
	// style attribute is an complex object, and do not return a text stylesheet like Mozilla.
	document.getElementById('linkStyle').value = WYSIWYG_Core.replaceRGBWithHexColor(WYSIWYG_Core.getAttribute(lin, "style"));	
}

/* ---------------------------------------------------------------------- *\
  Function    : updateTarget() (new)
  Description : Updates the target text field
  Arguments   : value - Value to be set
\* ---------------------------------------------------------------------- */
function updateTarget(value) {
	document.getElementById('linkTarget').value = value;
}

/* ---------------------------------------------------------------------- *\
  Function    : selectItem()
  Description : Select an item of an select box element by value.
\* ---------------------------------------------------------------------- */
function selectItemByValue(element, value) {
	if(element.options.length) {
		for(var i=0;i<element.options.length;i++) {
			if(element.options[i].value == value) {
				element.options[i].selected = true;
				return;
			}
		}
		element.options[(element.options.length-1)].selected = true;
	}
}

</script>
<body bgcolor="#EEEEEE" marginwidth="0" marginheight="0" topmargin="0" leftmargin="0" onLoad="loadLink();">

<table border="0" cellpadding="0" cellspacing="0" style="padding: 10px;"><tr><td>

<span style="font-family: arial, verdana, helvetica; font-size: 11px; font-weight: bold;">Insert Hyperlink:</span>
	<table width="330" border="0" cellpadding="1" cellspacing="0" style="background-color: #F7F7F7; border: 2px solid #FFFFFF; padding: 5px;">
	<tr>
		<td style="padding-bottom: 2px; padding-top: 0px; font-family: arial, verdana, helvetica; font-size: 11px;">URL:</td>
		<td style="padding-bottom: 2px; padding-top: 0px;" colspan="3">
			<input type="text" name="linkUrl" id="linkUrl" value="http://" style="font-size: 10px; width: 100%;">
		</td>
	</tr>
	<tr>
		<td style="padding-bottom: 2px; width: 50px; font-family: arial, verdana, helvetica; font-size: 11px;">Target:</td>
		<td style="padding-bottom: 2px;" colspan="3">
			<input type="text" name="linkTarget" id="linkTarget" value="" style="font-size: 10px; width: 65%;">
			&nbsp;
			<select name="linkTargetChooser" id="linkTargetChooser" style="font-size: 10px; width: 30%;" onchange="updateTarget(this.value);">
				<option value="" selected>no target</option>
				<option value="_blank">_blank</option>
				<option value="_self">_self</option>
				<option value="_parent">_parent</option>
				<option value="_top">_top</option>
				<option value="">custom</option>
			</select>
		</td>	
	</tr>
	<tr>
		<td style="padding-bottom: 2px; width: 50px; font-family: arial, verdana, helvetica; font-size: 11px;">Style:</td>
		<td style="padding-bottom: 2px;" colspan="3">
			<input type="text" name="linkStyle" id="linkStyle" value="" style="font-size: 10px; width: 100%;">
		</td>	
	</tr>
	<tr>
		<td style="padding-bottom: 2px; width: 50px; font-family: arial, verdana, helvetica; font-size: 11px;">Class:</td>
		<td style="padding-bottom: 2px;">
			<input type="text" name="linkClass" id="linkClass" value="" style="font-size: 10px; width: 90%;">
		</td>	
		<td style="padding-bottom: 2px; width: 30px; font-family: arial, verdana, helvetica; font-size: 11px;">Name:</td>
		<td style="padding-bottom: 2px; width: 120px;">
			<input type="text" name="linkName" id="linkName" value="" style="font-size: 10px; width: 100%;">
		</td>	
	</tr>
 
</table>	

<div align="right" style="padding-top: 5px;"><input type="submit" value="  Submit  " onClick="insertHyperLink();" style="font-size: 12px;" >&nbsp;<input type="submit" value="  Cancel  " onClick="window.close();" style="font-size: 12px;" ></div>

</td></tr></table>

</body>
</html>
